<!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/adjust-style.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>调整绘制样式</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
    </style>
</head>

<body>
<div id="container" style="width: 100%;;height: 100%;">
</div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=您申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });
    //加载PointSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(['misc/PointSimplifier'], function(PointSimplifier) {

        if (!PointSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pointSimplifierIns = new PointSimplifier({
            map: map, //关联的map
            getPosition: function(dataItem) {
                //返回数据项的经纬度，AMap.LngLat实例或者经纬度数组
                return dataItem.position;
            },
            getHoverTitle: function(dataItem, idx) {
                //返回数据项的Title信息，鼠标hover时显示
                return '序号: ' + idx;
            },
            renderOptions: {
                //点的样式
                pointStyle: {
                    fillStyle: 'blue' //蓝色填充
                }
            }
        });

        //随机创建一批点，仅作示意
        var data = createPoints(map.getCenter(), 100000);

        //设置数据源，data需要是一个数组
        pointSimplifierIns.setData(data);

        //监听事件
        pointSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) {
            console.log(e.type, record);
        })
    });

    //仅作示意
    function createPoints(center, num) {
        var data = [];
        for (var i = 0, len = num; i < len; i++) {
            data.push({
                position: [
                    center.getLng() + (Math.random() > 0.5 ? 1 : -1) * Math.random(),
                    center.getLat() + (Math.random() > 0.5 ? 1 : -1) * Math.random()
                ]
            });
        }
        return data;
    }
</script>
</body>

</html>